<template>
  <div class="department-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- card title -->
        <div slot="header">
          <!-- 用一个行列布局 -->
          <el-row>
            <el-col :span="20">
              <span>{{ companyName }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>负责人</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="addDept()">
                        添加子部门
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- card body -->
        <div>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            :default-expand-all="true"
            @node-click="handleNodeClick"
          >
            <template #default="{ data }">
              <el-row style="width: 100%">
                <el-col :span="20">
                  <span>{{ data.name }}</span>
                </el-col>
                <el-col :span="4">
                  <el-row type="flex" justify="end">
                    <!-- 两个内容 -->
                    <el-col>{{ data.manager || "ceo" }}</el-col>
                    <el-col>
                      <!-- 下拉菜单 element -->
                      <el-dropdown>
                        <span> 操作<i class="el-icon-arrow-down" /> </span>
                        <!-- 下拉菜单 -->
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="addDept(data)">
                            添加子部门
                          </el-dropdown-item>
                          <el-dropdown-item @click.native="editDepart(data)">
                            编辑部门
                          </el-dropdown-item>
                          <el-dropdown-item @click.native="delPart(data)">
                            删除部门
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-tree>
        </div>
      </el-card>
    </div>
    <AddDept
      ref="edit"
      :show-dialog="showDialog"
      :cur-node="curNode"
      :all-tree-data="allTreeData"
      @close-dialog="showDialog = false"
      @update-depart="handleNodeClick"
    />
  </div>
</template>
<script>
import { getDepartments, delDepartments } from '@/api/departwents'
import { tranListToTreeData } from '@/utils/index'
import AddDept from './components/add-dept.vue'
export default {
  components: {
    AddDept
  },
  data () {
    return {
      allTreeData: [],
      showDialog: false,
      companyName: '',
      treeData: [],
      curNode: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created () {
    this.handleNodeClick()
  },
  methods: {
    editDepart (data) {
      // 1.打开弹框
      this.showDialog = true
      // 2.记录一下当前点击的是谁 也就是要给谁添加子部门
      this.curNode = data
      // 3.通知子组件进行数据获取回显=》调用子组件方法获取当前编辑节点数据
      // 3.通知子组件调用获取详情接口进行回显操作
      console.log(this.$refs.edit)
      this.$refs.edit.hGetDepartDetail(data.id)
    },
    async handleNodeClick () {
      const { depts, companyName } = await getDepartments()
      this.allTreeData = depts
      console.log(this.allTreeData)
      this.treeData = tranListToTreeData(depts)
      this.companyName = companyName
      console.log(depts)
    },

    delPart (data) {
      this.$confirm('你确认要进行删除么?', '温馨提示').then(async () => {
        if (data.children && data.children.length > 0) {
          return this.$message.error('不能直接删除父节点！')
        }
        // 删除操作成功
        await delDepartments(data.id)
        // 添加提示
        this.$message.success('删除操作成功')
        // 更新数据
        this.handleNodeClick()
      }).catch(error => {
        console.log(error)
      })
    },
    addDept (data) {
      // 展示弹框
      this.showDialog = true
      // 存储当前操作部门数据
      this.curNode = data
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree-node__content {
  margin: 3px 0;
  font-size: 14px;
}
</style>
